<!DOCTYPE html>
<!-- 使用方法：
直接访问
file:///D:/liukai/code/html/%E8%BD%A8%E8%BF%B9/baidu2.html?p=mi8se,20220001,116.404355,39.922723;mi8se,20220002,116.396307,39.932018;mi8se,20220003,116.350601,39.911434;mi9,20220004,116.335078,40.008106;mi9,20220005,114.32173490524292,30.489383339881897;
可以查看坐标连接起来的路径 -->
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        body,
        html,
        #locationmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
	<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
    <title>大家的位置</title>
    <script>
         // 获取url请求参数
        function getQueryParams() {
            var query = location.search.substring(1)
            var arr = query.split('&')
            var params = {}
            for (var i = 0; i < arr.length; i++) {
                var pair = arr[i].split('=')
                params[pair[0]] = pair[1]
            }
            console.log(params)
            return params
        }
        
        function getQueryParam(key) {
            var query = location.search.substring(1)
            var arr = query.split('&')
            for (var i = 0; i < arr.length; i++) {
                var pair = arr[i].split('=')
                if (pair[0] == key) {
                    return pair[1]
                }
            }
            return undefined
        }
    </script>
    
</head>

<body>
    <div id="locationmap"></div>
</body>


<script type="text/javascript">

    var gpsPoint;

    var posstr = getQueryParam('p')
    if (!posstr){
        //posstr = "mi8se,20220001,116.404355,39.922723;mi8se,20220002,116.396307,39.932018;mi8se,20220003,116.350601,39.911434;mi9,20220004,116.335078,40.008106;mi9,20220005,114.32173490524292,30.489383339881897;";
        posstr = "mi8se,20220001,116.404355,39.922723;mi8se,20220002,114.33384433506164,30.49339926637946;";

    }
    var pos_list = posstr.split(';');
    var pos_result=[];
    var last_lng;
    var last_lat;
    for (i = 0; i < pos_list.length-1; i++) {
        var point_detail = pos_list[i].split(',')
        // var baiduTruePos = getBaiDuPos(point_detail[2],point_detail[3]);
        // alert(baiduTruePos);
        var onerow = { "id": i, "address": i, "userid": point_detail[0], "longitude": point_detail[2], "latitude": point_detail[3], "datetime": point_detail[1]};
        pos_result.push(onerow);
        last_lng = point_detail[2];
        last_lat = point_detail[3];
    }
    // alert(pos_result);

    var city = "武汉";
    var map = new BMap.Map("locationmap"); // 百度地图API功能
    // map.centerAndZoom(city, 14); // 设置地图显示的城市和地图级别
    map.enableScrollWheelZoom(); // 启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom(); // 启用地图惯性拖拽，默认禁用
    map.addControl(new BMap.NavigationControl());  // 添加默认缩放平移控件
    map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
    map.addControl(new BMap.MapTypeControl()); // 添加地图类型控件
    map.addControl(new BMap.OverviewMapControl());  // 添加缩略地图控件

    // alert(last_lng);
    gpsPoint = new BMap.Point(last_lng,last_lat);
    map.centerAndZoom(gpsPoint, 15);   // 点位居中显示
    map.setCenter(gpsPoint);  //点位居中显示

    $(function () {
        search(pos_result);
    })

    function search(result) {

        // var result = [{ "id": '1', "address": "故宫博物馆", "userid": "a1", "longitude": "116.404355", "latitude": "39.922723", "datetime": "2016" },
        // { "id": '2', "address": "北海公园", "userid": "a2", "longitude": "116.396307", "latitude": "39.932018", "datetime": "2016" },
        // { "id": '3', "address": "首都博物馆", "userid": "a3", "longitude": "116.350601", "latitude": "39.911434", "datetime": "2016" },
        // { "id": '4', "address": "清华大学", "userid": "a4", "longitude": "116.335078", "latitude": "40.008106", "datetime": "2016" }];

        // var mylng = 114.32173490524292;
        // var mylat = 30.489383339881897;


        // var myGeo = new BMap.Geocoder();      
        // // 根据坐标得到地址描述    
        // myGeo.getLocation(new BMap.Point(116.335078, 40.008106), function(result){      
        //     if (result){
        //     alert('定位成功：'+ result.address);
        //     }
        // });


        // result.push({ "id": '4', "address": "home", "userid": "liukai", "longitude": mypoint[0], "latitude": mypoint[1], "datetime": "2016" })

        // map.clearOverlays();
        // 清除标注信息
        var points = [];
        // 添加折线运动轨迹
        for (i = 0; i < result.length; i++) {
            var userid = result[i].userid;
            // 用户ID
            var longitude = result[i].longitude;
            // 经度
            var latitude = result[i].latitude;
            // 纬度
            var address = result[i].address;
            // 地点
            var sign_time = result[i].datetime;
            // 签到时间
            var point = new BMap.Point(longitude, latitude);
            // 填充标注点
            // if (i == result.length-1) {
            //     // city = result[i].address;
            //     map.centerAndZoom(city, 14);
            //     map.setCenter(point);
            //     // alert(longitude);
            //     // 设置中心坐标
            // }
            var tips = userid + "，" + sign_time + "，" + address;
            addMarker(point, map, tips);
            points.push(point);
        }
        var polyline = new BMap.Polyline(points);
        map.addOverlay(polyline);

    }

    //编写自定义函数,创建标注
    function addMarker(point, map, tips) {
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        //为标注添加文字信息
        var label = new BMap.Label(tips, { offset: new BMap.Size(20, -10) });
        marker.setLabel(label);
    }

    function sleep (time) {
        return new Promise((resolve) => setTimeout(resolve, time));
    }




    // function getBaiDuPos(lng,lat){
    //     var baidu_lng;
    //     var baidu_lat;
    //     //坐标转换完之后的回调函数
    //     translateCallback = function (point){
    //         // var marker = new BMap.Marker(point);
    //         // map.addOverlay(marker);
    //         // var label = new BMap.Label("我是百度标注哦",{offset:new BMap.Size(20,-10)});
    //         // marker.setLabel(label); //添加百度label
    //         // map.setCenter(point);
    //         // alert(point.lng + "," + point.lat);
    //         baidu_lng = point.lng;
    //         baidu_lat = point.lat;
    //     }
    //     var curPoint = new BMap.Point(lng,lat);
    //     BMap.Convertor.translate(curPoint,0,translateCallback);     //真实经纬度转成百度坐标
    //     sleep(2000)
    //     alert(baidu_lat);
    //     return [baidu_lng, baidu_lat];
    // }

</script>



<!-- <script>
    //获取定位，并显示地址
          //关于状态码
          const BMAP_STATUS_SUCCESS = 0 //检索成功。对应数值“0”。
      const BMAP_STATUS_CITY_LIST = 1 //城市列表。对应数值“1”。
      const BMAP_STATUS_UNKNOWN_LOCATION = 2 //位置结果未知。对应数值“2”。
      const BMAP_STATUS_UNKNOWN_ROUTE = 3 //导航结果未知。对应数值“3”。
      const BMAP_STATUS_INVALID_KEY = 4 //非法密钥。对应数值“4”。
      const BMAP_STATUS_INVALID_REQUEST = 5 //非法请求。对应数值“5”。
      const BMAP_STATUS_PERMISSION_DENIED = 6 //没有权限。对应数值“6”。(自 1.1 新增)
      const BMAP_STATUS_SERVICE_UNAVAILABLE = 7 //服务不可用。对应数值“7”。(自 1.1 新增)
      const BMAP_STATUS_TIMEOUT = 8 //超时。对应数值“8”。(自 1.1 新增)
      //自动定位
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(r){
          if(this.getStatus() == BMAP_STATUS_SUCCESS){
              console.log('您的坐标：' + r.point.lng + ',' + r.point.lat); // 这是百度坐标
              var lng = r.point.lng;
              var lat = r.point.lat;
              // 创建地理编码实例      
              var myGeo = new BMap.Geocoder();      
              // 根据坐标得到地址描述    
              myGeo.getLocation(new BMap.Point(lng, lat), function(result){      
                  if (result){
                    alert('定位成功：'+ result.address);
                  }
              });
          }
          else {
              alert('定位失败：' + this.getStatus());
          }        
      })

    </script> -->
</html>